<template>
  <div class="userchange">
      <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>人资月报表</span>
            </div>
      
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="人资异动分析" name="first">
          <div class="cho">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="按区域筛选">
                    <el-select size="small"  @change="areaselected(formInline.area)" v-model="formInline.area" placeholder="按区域筛选">
                    <el-option 
                    v-for="(item,index) in areacho"
                    :key="item+index"
                    :value="item.area"
                    >{{item.area}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="按项目筛选">
                    <el-select size="small"  @change="departmentselected(formInline.project)" v-model="formInline.project" placeholder="按项目筛选">
                    <el-option 
                    v-for="(item,index) in selection"
                    :key="item+index"
                    :value="item"
                    >{{item}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="date">
                <el-date-picker
                    type="month"
                    value-format="yyyy-MM"
                    @change="getSTime"
                    placeholder="选择月份"
                    v-model="formInline.date"
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="choose">筛选</el-button>
                    <el-button type="primary" size="small" @click="chooseall">全部</el-button>
                </el-form-item>
                </el-form>
            </div>
            <div class="changesheet">
                <div class="detail_person">
                <h3>人力资源异动分析</h3>
                <table>
                    <tr>
                        <th rowspan="2"></th>
                        <th rowspan="2">上月末人数</th>
                        <th colspan="2">本月新增人员</th>
                        <th colspan="3">本月减少人员</th>
                        <th colspan="3">月末统计</th>
                        <th colspan="2">月离职率统计</th>
                        <th rowspan="2">累计离职人数</th>
                    </tr>
                    <tr>
                        <th>社会招聘</th>
                        <th>其他</th>
                        <th>主动离职</th>
                        <th>被动离职</th>
                        <th>其他</th>
                        <th>月末人数</th>
                        <th>较上月增加人数</th>
                        <th>较上月增长率</th>
                        <th>主动离职率</th>
                        <th>被动离职率</th>
                    </tr>
                    <tr v-for="(item,index) in tableData" :key="item+index">
                        <td v-if="item.project===null&&item.department===null">{{item.area}}</td>
                        <td v-else-if="item.project!==null&&item.department===null">{{item.project}}</td>
                        <td v-else-if="item.project!==null&&item.department!==null">{{item.department}}</td>
                        <td>{{item.last_month}}</td>
                        <td>{{item.last_month_add_staff}}</td>
                        <td>{{item.other_last_month_add_staff}}</td>
                        <td>{{item.this_month_own_remove_staff}}</td>
                        <td>{{item.this_month_passive_remove_staff}}</td>
                        <td>{{item.this_month_other_remove_staff}}</td>
                        <td>{{item.this_month}}</td>
                        <td>{{item.growth_staff}}</td>
                        <td>{{item.growth_rate}}</td>
                        <td>{{item.own_rate}}</td>
                        <td>{{item.passive_rate}}</td>
                        <td>{{item.sum_remove_staff}}</td>
                    </tr>
                    <tr>
                        <td>合计</td>
                        <td>{{this.total.last_monthall}}</td>
                        <td>{{this.total.last_month_add_staffall}}</td>
                        <td>{{this.total.other_last_month_add_staffall}}</td>
                        <td>{{this.total.this_month_own_remove_staffall}}</td>
                        <td>{{this.total.this_month_passive_remove_staff}}</td>
                        <td>{{this.total.this_month_other_remove_staff}}</td>
                        <td>{{this.total.this_monthall}}</td>
                        <td>{{this.total.growth_staffall}}</td>
                        <td>{{this.total.growth_rate}}</td>
                        <td>{{this.total.own_rate}}</td>
                        <td>{{this.total.passive_rate}}</td>
                        <td>{{this.total.sum_remove_staff}}</td>
                    </tr>
                </table>
                </div>
            </div>
            <div id="changechart" :style="{width: '100%', height: '70vh'}"></div>
        </el-tab-pane>
        <el-tab-pane label="在职人员分析" name="second"><Formsheet></Formsheet></el-tab-pane>
        <el-tab-pane label="招聘情况分析" name="third"><Recruitment></Recruitment></el-tab-pane>
        <el-tab-pane label="培训情况分析" name="fourth"><Education></Education></el-tab-pane>
        <el-tab-pane label="离职人员分析" name="fifth"><Quitjob></Quitjob></el-tab-pane>
        <!-- <el-tab-pane label="人力资源成本" name="sixth">人力资源成本</el-tab-pane> -->
      </el-tabs>
  </div>
</template>

<script>
import {get ,post} from '../../../utils/axios.tool'
import Formsheet from '../../usermall/formsheet'
import Recruitment from '../recruitment'
import Education from '../education'
import Quitjob from '../quitjob'
export default {
    components:{
        Formsheet,Recruitment,Education,Quitjob
    },
    data() {
        return {
            formInline: {
                area: '',
                project: '',
                date: "",
            },
            areacho:[],
            activeName: 'first',
            tableData:[
                {
                    id: "",
                    area: "",
                    project: "",
                    department: "",
                    last_month: "",
                    last_month_add_staff: "",
                    other_last_month_add_staff: "",
                    this_month_own_remove_staff: "",
                    this_month_passive_remove_staff: "",
                    this_month_other_remove_staff: "",
                    this_month: "",
                    growth_staff: "",
                    growth_rate: "",
                    own_rate: "",
                    passive_rate: "",
                    sum_remove_staff: "",
                }
            ],
            total:{
                last_monthall:0,
                last_month_add_staffall:0,
                other_last_month_add_staffall:0,
                this_month_own_remove_staffall:0,
                this_month_passive_remove_staff:0,
                this_month_other_remove_staff:0,
                this_monthall:0,
                growth_staffall:0,
                growth_rate: 0,
                own_rate: 0,
                passive_rate: 0,
                sum_remove_staff:0
            },
            aa:[],
            bb:[],
            cc:[]
        }
    },
    methods:{
        handleClick(tab, event) {
        },
        getSTime(val){
            this.formInline.data = val
        },
        areaselected(val){
            this.formInline.area = val
            this.formInline.project = ''
        },
        departmentselected(val){
            this.formInline.project = val
        },
        choose(){
            this.aa = []
            this.bb = []
            this.cc = []
            this.total={
                last_monthall:0,
                last_month_add_staffall:0,
                other_last_month_add_staffall:0,
                this_month_own_remove_staffall:0,
                this_month_passive_remove_staff:0,
                this_month_other_remove_staff:0,
                this_monthall:0,
                growth_staffall:0,
                growth_rate: 0,
                own_rate: 0,
                passive_rate: 0,
                sum_remove_staff:0
            }
            let url = '/usermanage/hr_statements/';
            this.$axios.get(url,this.formInline).then(res => {
                this.tableData = res
                res.map((item,index)=>{
                    this.total.last_monthall+=item.last_month
                    this.total.last_month_add_staffall+=item.last_month_add_staff
                    this.total.other_last_month_add_staffall+=item.other_last_month_add_staff
                    this.total.this_month_own_remove_staffall+=item.this_month_own_remove_staff
                    this.total.this_month_passive_remove_staff+=item.this_month_passive_remove_staff
                    this.total.this_month_other_remove_staff+=item.this_month_other_remove_staff
                    this.total.this_monthall+=item.this_month
                    this.total.growth_staffall+=item.growth_staff
                    this.total.sum_remove_staff+=item.sum_remove_staff
                })
                this.total.growth_rate = `${(this.total.growth_staffall/this.total.last_monthall*100).toFixed(2)}%`=='NaN%'||`${(this.total.growth_staffall/this.total.last_monthall*100).toFixed(2)}%`=='-Infinity%'?0:`${(this.total.growth_staffall/this.total.last_monthall*100).toFixed(2)}%`
                this.total.own_rate = `${(this.total.this_month_own_remove_staffall/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`=='NaN%'?0:`${(this.total.this_month_own_remove_staffall/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`
                this.total.passive_rate = `${(this.total.this_month_passive_remove_staff/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`=='NaN%'?0:`${(this.total.this_month_passive_remove_staff/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`
                this.kkkkap()
                this.mmmmmap()
                this.drawLine()
            });
        },
        mmmmmap(){
            let aa = this.aa
            this.tableData.map((item,index)=>{
                if(this.formInline.area==''){
                     aa.push(item.area)
                }else if(this.formInline.area!=''&&this.formInline.project==''){
                    aa.push(item.project)
                }else if(this.formInline.area!=''&&this.formInline.project!=''){
                    aa.push(item.department)
                }
                return aa
            })
            this.aa.push('合计')
        },
        kkkkap(){
            let bb = this.bb
            this.tableData.map((item,index)=>{
                bb.push(item.last_month)
                return bb
            })
            this.bb.push(this.total.last_monthall)
            let cc = this.cc
            this.tableData.map((item,index)=>{
                cc.push(item.this_month)
                return cc
            })
            this.cc.push(this.total.this_monthall)
        },
        areachoose(){
            let url='/usermanage/area/'
            this.$axios.get(url).then(res=>{
                this.areacho = res.data
            })
        },
        chooseall(){
            this.formInline.area = ''
            this.formInline.project = ''
            this.formInline.date = ''
            this.getData()
        },
        getData(){
            this.aa = []
            this.bb = []
            this.cc = []
            this.total={
                last_monthall:0,
                last_month_add_staffall:0,
                other_last_month_add_staffall:0,
                this_month_own_remove_staffall:0,
                this_month_passive_remove_staff:0,
                this_month_other_remove_staff:0,
                this_monthall:0,
                growth_staffall:0,
                growth_rate: 0,
                own_rate: 0,
                passive_rate: 0,
                sum_remove_staff:0
            }
            let url = '/usermanage/hr_statements/'
            this.$axios.get(url).then(res=>{
                this.tableData = res
                res.map((item,index)=>{
                    this.total.last_monthall+=item.last_month
                    this.total.last_month_add_staffall+=item.last_month_add_staff
                    this.total.other_last_month_add_staffall+=item.other_last_month_add_staff
                    this.total.this_month_own_remove_staffall+=item.this_month_own_remove_staff
                    this.total.this_month_passive_remove_staff+=item.this_month_passive_remove_staff
                    this.total.this_month_other_remove_staff+=item.this_month_other_remove_staff
                    this.total.this_monthall+=item.this_month
                    this.total.growth_staffall+=item.growth_staff
                    this.total.sum_remove_staff+=item.sum_remove_staff
                })
                this.total.growth_rate = `${(this.total.growth_staffall/this.total.last_monthall*100).toFixed(2)}%`=='NaN%'||`${(this.total.growth_staffall/this.total.last_monthall*100).toFixed(2)}%`=='-Infinity%'?0:`${(this.total.growth_staffall/this.total.last_monthall*100).toFixed(2)}%`
                this.total.own_rate = `${(this.total.this_month_own_remove_staffall/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`=='NaN%'?0:`${(this.total.this_month_own_remove_staffall/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`
                this.total.passive_rate = `${(this.total.this_month_passive_remove_staff/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`=='NaN%'?0:`${(this.total.this_month_passive_remove_staff/(this.total.this_month_own_remove_staffall+this.total.this_month_passive_remove_staff+this.total.this_month_other_remove_staff+this.total.this_monthall)*100).toFixed(2)}%`
                this.kkkkap()
                this.mmmmmap()
                this.drawLine()
            })
        },
        anyway(){
            this.$axios.get('/usermanage/auto_hr_statements/').then(res=>{
                if(res.msg=='成功'){
                    
                }
            })
        },
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let changechart = this.$echarts.init(document.getElementById('changechart'))
            // 绘制图表
            changechart.setOption({
                tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['上月末人数','本月末人数'],
                    },
                    color:['#2BD5D5','#F68098'],
                    grid:{
                        y2:200
                    },
                    xAxis : [
                        {   
                            type : 'category',
                            data : this.aa,
                            axisLabel:{
                                interval:0,//横轴信息全部显示
                                rotate:-40,//-30度角倾斜显示
                                fontSize:'14'
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'上月末人数',
                            type:'bar',
                            data:this.bb,
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#2BD5D5',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        },
                        {
                            name:'本月末人数',
                            type:'bar',
                            data:this.cc,
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#F68098',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        }
                    ]
                    
            });
        }
    },
    mounted(){
        this.areachoose()
        this.getData()
        this.anyway()
    },
    computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area){
                    return this.areacho[i].project;
                }
            }
        },
   }
}
</script>

<style lang="less">
.userchange{
    .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
    .changesheet{
    width: 100%;
    .detail_person{
        margin-bottom: 35px;
    }
    h3{
        text-align: center;
        margin: 0;
        padding: 12px;
        border-top: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        margin-right: 1px;
    }
    table, th , td  {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
      text-align: center;
      padding: 10px;
    }
    table{
        width: 100%;
    }
  }
  
  #changechart{
      margin-top: 80px;
  }
}
</style>